interface Location {
  x: number
  y: number
}

interface Extent {
  minX: number
  maxX: number
  minY: number
  maxY: number
}

// 预先计算DOM元素的extents
function getElementExtents(domList: HTMLElement[]): Extent[] {
  return domList.map((element) => ({
    minX: element.getBoundingClientRect().left,
    maxX: element.getBoundingClientRect().left + element.getBoundingClientRect().width,
    minY: element.getBoundingClientRect().top,
    maxY: element.getBoundingClientRect().top + element.getBoundingClientRect().height
  }))
}
// 计算坐标对应的组件index
export function computeCurrIndex(val: Location): number {
  const dom = document.getElementById('bff_editor')
  const domList = dom?.getElementsByClassName('item')
  if (!domList) return -1

  const extents = getElementExtents(Array.from(domList) as HTMLElement[])

  for (let i = 0; i < extents.length; i++) {
    if (isInExtent(val, extents[i])) {
      return i
    }
  }

  return -1
}

export const isInExtent = (val: Location, extent: Extent): boolean =>
  val.x > extent.minX && val.x < extent.maxX && val.y > extent.minY && val.y < extent.maxY

// 设置组件大小
import { type sizeConfig } from '@/components/layout/config'
export const setComponentsSize = (layout:number, sizeConfig: sizeConfig) => {
  const editor = document.getElementById('bff_editor');
  if(!editor) return
  const items = Array.from(editor.getElementsByClassName('item')) as HTMLElement[]
  const editorWidth = editor.offsetWidth
  const editorHeight = editor.offsetHeight
  switch (layout) {
    case 4: {
      if(!sizeConfig.vLeft || !sizeConfig.hTop || !sizeConfig.headerHeiht) return
      const heightT = sizeConfig.hTop - sizeConfig.headerHeiht
      const heightB = editorHeight - sizeConfig.hTop
      const widthR = editorWidth - sizeConfig.vLeft
      items.forEach((element, index) => {
        let height, width, top, left
        switch (index) {
          // 左上
          case 0:
            height = `${heightT}px`
            width = `${sizeConfig.vLeft}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `0px`
            break
          // 右上
          case 1:
            height = `${heightT}px`
            width = `${widthR}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `${sizeConfig.vLeft}px`
            break
          // 左下
          case 2:
            width = `${sizeConfig.vLeft}px`
            height = `${heightB}px`
            top = `${sizeConfig.hTop}px`
            left = `0px`
            break
          // 右下
          case 3:
            height = `${heightB}px`
            width = `${widthR}px`
            top = `${sizeConfig.hTop}px`
            left = `${sizeConfig.vLeft}px`
            break
        }
    
        if (height) element.style.height = height
        if (width) element.style.width = width
        if (top) element.style.top = top
        if (left) element.style.left = left
      })
      break;
    }
    case 5: {
      if(!sizeConfig.vlLeft || !sizeConfig.vrLeft || !sizeConfig.hlTop || !sizeConfig.hrTop || !sizeConfig.headerHeiht) return
      const heightLt = sizeConfig.hlTop - sizeConfig.headerHeiht
      const heightLb = editorHeight - sizeConfig.hlTop
      const widthC = sizeConfig.vrLeft - sizeConfig.vlLeft
      const heightC = editorHeight - sizeConfig.headerHeiht
      const heightRt = sizeConfig.hrTop - sizeConfig.headerHeiht
      const widthR = editorWidth - sizeConfig.vrLeft
      const heightRb = editorHeight - sizeConfig.hrTop
      items.forEach((element, index) => {
        let height, width, top, left
        switch (index) {
          // 左上
          case 0:
            height = `${heightLt}px`
            width = `${sizeConfig.vlLeft}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `0px`
            break
          // 左下
          case 1:
            height = `${heightLb}px`
            width = `${sizeConfig.vlLeft}px`
            top = `${sizeConfig.hlTop}px`
            left = `0px`
            break
          // 中间
          case 2:
            width = `${widthC}px`
            left = `${sizeConfig.vlLeft}px`
            height = `${heightC}px`
            top = `${sizeConfig.headerHeiht}px`
            break
          // 右上
          case 3:
            height = `${heightRt}px`
            width = `${widthR}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `${sizeConfig.vrLeft}px`
            break
          // 右下
          case 4:
            height = `${heightRb}px`
            width = `${widthR}px`
            top = `${sizeConfig.hrTop}px`
            left = `${sizeConfig.vrLeft}px`
            break
        }
    
        if (height) element.style.height = height
        if (width) element.style.width = width
        if (top) element.style.top = top
        if (left) element.style.left = left
      })
      break;
    }
    case 6: {
      if(!sizeConfig.vlLeft || !sizeConfig.vrLeft || !sizeConfig.hTop || !sizeConfig.headerHeiht) return
      const heightT = sizeConfig.hTop - sizeConfig.headerHeiht
      const heightB = editorHeight - sizeConfig.hTop
      const widthC = sizeConfig.vrLeft - sizeConfig.vlLeft
      const widthR = editorWidth - sizeConfig.vrLeft
      items.forEach((element, index) => {
        let height, width, top, left
        switch (index) {
          // 左上
          case 0:
            height = `${heightT}px`
            width = `${sizeConfig.vlLeft}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `0px`
            break
          // 中上
          case 1:
            height = `${heightT}px`
            width = `${widthC}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `${sizeConfig.vlLeft}px`
            break
          // 右上
          case 2:
            height = `${heightT}px`
            width = `${widthR}px`
            top = `${sizeConfig.headerHeiht}px`
            left = `${sizeConfig.vrLeft}px`
            break
          // 左下
          case 3:
            width = `${sizeConfig.vlLeft}px`
            height = `${heightB}px`
            top = `${sizeConfig.hTop}px`
            left = `0px`
            break
          // 中下
          case 4:
            width = `${widthC}px`
            height = `${heightB}px`
            top = `${sizeConfig.hTop}px`
            left = `${sizeConfig.vlLeft}px`
            break
          // 右下
          case 5:
            height = `${heightB}px`
            width = `${widthR}px`
            top = `${sizeConfig.hTop}px`
            left = `${sizeConfig.vrLeft}px`
            break
        }
    
        if (height) element.style.height = height
        if (width) element.style.width = width
        if (top) element.style.top = top
        if (left) element.style.left = left
      })
      break;
    }
  }
}

export const judgeKey = (obj: any, key: string) => {
  return Object.prototype.hasOwnProperty.call(obj, key)
}